<!--公共头部-->
{template 'aitimt/common/header'}
		<style>
		* {touch-action: pan-y;}
		.mui-control-content {background-color: white;min-height: 50rem;}
		.mui-control-content .mui-loading {margin-top: 50px;}
		.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#ff9400;}
		.mui-table-view .mui-media-object{height: 80px;max-width: 110px;}
		.mui-bar-nav{background-color: #e94709;}
		.top-return {position: absolute;width: 10%;top: 0.1875rem;}
		.top-return img{width: 75%;}
		.mui-bar-nav .mui-title{color: #FFFFFF;}
		.top-logo {position: absolute;width: 10%;left: 28%;top: 0.1875rem;}
		.top-logo img{width: 90%;}
		.top-menu {position: absolute;width: 10%;right: 5%;top: 0.1875rem;}
		.top-menu img{width: 75%;}
		/* 公共部分end */
		.mui-table-view .mui-media, .mui-table-view .mui-media-body{line-height: 2rem;}
		.mui-slider-indicator.mui-segmented-control .mui-control-item {border-left:1px solid #c1c1c1 ;border-bottom:1px solid #c1c1c1 ;padding: 1px;color: #585858;}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{border-bottom:3px solid #e94709 ;color: #585858;}
		.addtime{padding-top: 10px;font-size: 10px;}
		.mui-table-view .mui-media-object.mui-pull-left{margin-right: 25px;}
		.mui-content>.mui-table-view:first-child{margin: 0;}
		.mui-content ul{height: 6.5rem;}
		.entry-pro {font-weight: 520;font-size: 15px;color: #000000;background-color: #FFFFFF;padding: 10px 0 1px 5%;}
		.entry-message input{height: 30px;font-size: 15px;}
		.entry-message{font-weight: 520;font-size: 15px;color: #000000;background-color: #FFFFFF;padding: 10px 0 1px 5%;height: 32rem;}
		.entry-message .mui-input-group::before ,.entry-message .mui-input-group::after{height: 0;}
		.entry-message .mui-input-group input{height: 30px;border: 1px solid #EEEEEE;width: 90%;}
		.entry-message .mui-input-group p{margin-bottom: 1px;}
		.entry-message .mui-input-group input::-webkit-input-placeholder{font-size:14px;color: #bcbcbc;}
		.entry-select{position: absolute;width: 90%;height: 30px;margin-bottom: 10px;}
		.mui-btn-block{font-size: 14px;margin: 0;padding: 0;border: 1px solid #EEEEEE !important;padding-left: 4%;line-height: 25px;color: #000000;}
		.mui-btn-block option:first-child{font-size: 14px;margin: 0;padding: 0;color: #bcbcbc;}
	</style>
		<!-- 公共头部start -->
		<header class="mui-bar mui-bar-nav">
			<a class="top-return mui-action-back"><img src="{$aideUrl}app/resource/aitimt/images/return.png" ></a>
			<a class="top-logo"><img src="{$aideUrl}app/resource/aitimt/images/logo.png" ></a>
			<h1 class="mui-title">
					Aitimt 爱计时</h1>
			<!--公共菜单start -->
			{template 'aitimt/common/menu'}
			<!-- 公共菜单end-->
		</header>
		<!-- 公共头部end -->
		<div class="mui-content">
			<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
								<img class="mui-media-object mui-pull-left" src="{php echo tomedia($activity['thumb'])}">
								<div class="mui-media-body">
									<h4 style="color: #595757;">{$activity['title']}</h4>
									<p class=" mui-icon iconfont icon-riqi addtime">{$activity['starttime']}</p>
									<p class=" mui-icon iconfont icon-didian addtime">{$activity['address']}</p>
								</div>
						</li>
					</ul>
			<div style="font-size: 15px;color: #e94709;margin-left: 5%;font-weight: 800;" >
				报名项目
			</div>
			<div class="entry-pro">
				<p>报名项目:{$pro['name']}</p>
				<p>报名费用:{if $pro['pprice']!=0}￥{$pro['pprice']}{else}免费{/if}</p>
			</div>
			<div style="font-size: 15px;color: #e94709;margin-left: 5%;font-weight: 800;" >
				报名信息
			</div>
			<div class="entry-message">
				<form class="mui-input-group" action="" method="post" id="formdata">
					<input type="hidden" name="records[activityid]" value="{$activity['id']}" />
					<input type="hidden" name="records[proid]" value="{$pro['id']}" >
					<input type="hidden" name="records[formid]" value="{$fid}" >
					<p>常用报名人选择:爱计时</p>
					<p>姓名*:</p>
					<input type="text" name="records[realname]" placeholder="请输入姓名" id="name" value="{$entrymessage[0]['realname']}" />
					<p>手机号*:</p>
					<input type="text" name="records[mobile]" placeholder="请输入手机号" id="mobile" value="{$entrymessage[0]['mobile']}" />
					<p>性别*:</p>
					<div class="entry-select">
						<select  name="records[gender]" id="gender" class="mui-btn mui-btn-block" >
							<span class="mui-icon mui-icon-eye"></span>
							<option value="">请选择性别</option>
							<option value="0">女</option>
							<option value="1">男</option>
						</select>
						<span class="mui-icon mui-icon-arrowdown" style="position: absolute;top: 0;right: 5%;"></span>
					</div>

					<p style="margin-top: 30px;">证件类型*:</p>
					<div class="entry-select">
						<select name="records[cardtype]" id="cardtype" class="mui-btn mui-btn-block" >
							<span class="mui-icon mui-icon-eye"></span>
							<option value="">请选择证件类型</option>
							<option value="身份证">身份证</option>
							<option value="港澳通行证">港澳通行证</option>
						</select>
						<span class="mui-icon mui-icon-arrowdown" style="position: absolute;top: 0;right: 5%;"></span>
					</div>
					<p style="margin-top: 30px;">证件号码*:</p>
					<input type="text" name="records[card]" placeholder="请输入证件号码" id="card" value="{$entrymessage[0]['idcard']}" />
					<p>联系邮箱*:</p>
					<input type="text" name="records[email]" placeholder="请输入联系邮箱" id="email" value="{$entrymessage[0]['email']}" />
				</form>
				<p style="font-size: 10px;"><input name="checkbox" id="checkbox" style="float:left;height: 35px;" type="checkbox">
					<span style="line-height: 35px;margin-left: 10px;">我已阅读并接受爱计时参赛条款和主办方/组委会声明</span>
				</p>
			</div>
		</div>
		<!-- 公共底部start -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active " onclick="check()" style="background: #e94709;color: #FFFFFF;" >
				<span class="mui-tab-label">下一步</span>
			</a>
		</nav>
		<!-- 公共底部end -->
		<script type="text/javascript">
			{if !empty($recordLog)}
			var btnArray = ['查看记录', '继续'];
			var msg='您已有相同的活动项目报名记录，是否继续报名?';
			mui.confirm(msg,'',btnArray, function(e) {
				if (e.index != 1) {
					location.href = '{php echo app_url('home/index/myapply')}';
				}
			});
			{/if}

			{if ($activity['joinetime']<date("Y-m-d H:i:s",time()))}
			var btnArray = ['确定'];
			var msg='当前活动已截止报名';
			mui.confirm(msg,'',btnArray, function(e) {
					location.href ="javascript:history.go(-1)";
			});
			{/if}
			{if !empty($entrymessage)}
			var gen={$entrymessage[0]['gender']};
			var ctype='{$entrymessage[0]["cardtype"]}';
			$("#gender").val(gen);
			$("#cardtype").val(ctype);
			{/if}
				console.log({$recordLog[0]});
			function check() {
				var  name=document.getElementById('name');
				if (!name.value) {
					mui.toast('请输入名字');
					$("input[name='records[name]']").focus();
					return false;
				}
				var  mobile=document.getElementById('mobile');
				if (!mobile.value) {
					$("input[name='records[mobile]']").focus();
					mui.toast('请输入手机号码');
					return false;
				}else {
					var tel = mobile.value;//获取输入身份证
					var yidongreg = /^(134[012345678]\d{7}|1[34578][012356789]\d{8})$/;
					var dianxinreg = /^1[3578][01379]\d{8}$/;
					var liantongreg = /^1[34578][01256]\d{8}$/;
					//var reg = /^1[3|4|5|7|8]\d{9}$/;//这一种也可以
						if (yidongreg.test(tel) || dianxinreg.test(tel) || liantongreg.test(tel))
						{
						}else {
							$("input[name='records[mobile]']").focus();
							mui.toast('请输入正确的手机号码');
							return false;
						}

					}
				var  gender=document.getElementById('gender');
				if (!gender.options[gender.selectedIndex].value) {
					mui.toast('请选择性别');
					return false;
				}
				var  cardtype=document.getElementById('cardtype');
				if (!cardtype.options[cardtype.selectedIndex].value) {
					mui.toast('请选择证件类型');
					return false;
				}
				var  card=document.getElementById('card');
				if (!card.value) {
					$("input[name='records[card]']").focus();
					mui.toast('请输入证件号');
					return false;
				}else {
					var userCardvalue = card.value;//获取输入身份证
					var userCardreg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
					var taiwanreg=/^[A-Z][0-9]{9}$/;
					var xianggangreg=/^[A-Z][0-9]{6}\([0-9A]\)$/;
					var aomenreg=/^[157][0-9]{6}\([0-9]\)$/;
					if(userCardreg.test(userCardvalue)||taiwanreg.test(userCardvalue)||xianggangreg.test(userCardvalue)||aomenreg.test(userCardvalue))
					{
					}else {
						$("input[name='records[card]']").focus();
						mui.toast('请输入正确的证件号码');
						return false;
					}
				}
				var  email=document.getElementById('email');
				if (!email.value) {
					$("input[name='records[email]']").focus();
					mui.toast('请输入邮箱');
					return false;
				}else {
					var emailreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
					if (emailreg.test(email.value))
					{
					}else {
						$("input[name='records[email]']").focus();
						mui.toast('请输入正确的邮箱');
						return false;
					}
				}
				var  checkbox=document.getElementById('checkbox');
				if (!checkbox.checked){
					mui.toast('请勾选项目须知');
					return false;
				}
				$.post("{php echo app_url('home/index/confirm')}", $("#formdata").serialize(), function(data){
					if(data.errno == 1){
						util.alert(data.errmsg);
					}
					else {
							location.href = data.url;
					}
				},"json");

			}

		</script>

	</body>
</html>
